<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/main_1.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/lcommon.css">
<script src="js/jquery.min.js"></script>
<link href="js/um1.2.3/themes/default/css/umeditor.css?_ver=13" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script type="text/javascript" src="js/jquery.qqFace.js"></script>
<script type="text/javascript" src="js/um1.2.3/umeditor.config.js?_ver=13"></script>
<script type="text/javascript" src="js/um1.2.3/umeditor.js?_ver=13"></script>
<script type="text/javascript" src="js/emotion.js"></script>
<script src="js/lcommon.js"></script>
<style>
	span.emotion {  padding-left: 20px; cursor: pointer }
	span.emotion:hover { background-position: 2px -28px }
	.qqFace { margin-top: 4px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid; }
	.qqFace table td { padding: 0px; }
	.qqFace table td img { cursor: pointer; border: 1px #fff solid; }
	.qqFace table td img:hover { border: 1px #0066cc solid; }
	.el-input__inner{
		height:70px!important;
	}
	.mesScroll{
		overflow: initial!important;
	}
</style>
</head>
<body>
<div id="app" v-cloak>
	<header id="header">
		
	</header>
	<div class="header-space"></div>
	
	<section class="section51" >
		<div style="border-top: #007AFF 20px solid;"></div>
		<div class="content w1100">
			<div class="message-box scroll" style="border-top: none">
				<div class="wrap" style="display: -webkit-box;">
					<div class="friends-list" style="width: 350px;padding-top: 0px;">
						<span class="item on" v-for="(item,index) in mesList" :key="index" @click="selectChat(item)" :style="item.id==selectUid?'background:#fff':''">
							<img :src="item.user_image.url||'images/noUser.png'" alt="" class="face">
							<h3>
								{{item.name || '匿名用户'}}
								<time>{{item.newinfo_time}}</time>
							</h3> 
							<div class="txt" v-html="item.newinfo"></div>
							<i class="number" v-if="item.is_read_count">{{item.is_read_count}}</i>
						</span>
					</div>
					<div class="message" style="-webkit-box-flex: 1;">
						<!-- @mousewheel="handleScroll" -->
						<div class="talk-box scroll " style="padding: 0;overflow: hidden;">
							<div class="mesScroll" style="height: 430px;width: 100%;padding: 0 85px;">
							<div class="wrap mesWrap" >
								<div v-for="(item,index) in filterList" :key="index" v-if="(item.from_uid_info.id == selectUid && item.to_uid_info.id == myuid)||(item.to_uid_info.id==selectUid && item.from_uid_info.id == myuid)">
									<div class="top-msg" v-if="item.type==3">
										{{item.from_uid_info.name}}向您发送了面试邀请
										<a  class="btn noFresh" @click="location.href='item.content'">查看</a>
									</div>
									<div class="time">
										<time v-if="diffTime(index)">{{diffTime(index)}}</time>
									</div>
									<div class="item" v-if="item.type==1" :class="[item.from_uid == selectUid?'item-left':'item-right']">
										<div class="talk-face"><img :src="item.from_uid == selectUid?selectData.user_image:myImg" alt=""></div>
										<div class="con">
											<i class="talk-arrow"></i>
											<p v-html="item.content"></p>
										</div>
									</div>
									<div class="item item-right" v-if="item.type==2" :class="[item.from_uid == selectUid?'item-left':'item-right']">
										<div class="talk-face"><img :src="item.from_uid == selectUid?selectData.user_image:myImg" alt=""></div>
										<div class="con">
											<i class="talk-arrow"></i>
											<a href="" class="face-link">
												<img src="images/face.jpg" alt="" class="face">
												{{item.content}}
											</a>
										</div>
									</div>
									<!-- 企业发送面试邀请  -->
									<div class="item item-left" v-if="item.type==3" :class="[item.from_uid == selectUid?'item-left':'item-right']">
										<div class="talk-face"><img :src="item.from_uid == selectUid?selectData.user_image:myImg" alt=""></div>
										<div class="con invate"><i class="talk-arrow"></i>
											<div class="invate-txt">{{item.from_uid_info.name || '行政总监'}}向您发送了面试邀请</div>
											<a @click="showInterview(3,item)" class="link">查看</a>
										</div>
									</div>
									<!-- 企业取消面试邀请 -->
									<div class="item item-left" v-if="item.type==4" :class="[item.from_uid == selectUid?'item-left':'item-right']">
										<div class="talk-face"><img :src="item.from_uid == selectUid?selectData.user_image:myImg" alt=""></div>
										<div class="con invate"><i class="talk-arrow"></i>
											<div class="invate-txt">{{item.from_uid_info.name || '行政总监'}}取消了面试邀请</div>
											<a @click="showInterview(4,item)" class="link">查看</a>
										</div>
									</div>

									<!-- 用户接受面试邀请 -->
									<div class="item item-right" v-if="item.type==6" :class="[item.from_uid == selectUid?'item-left':'item-right']">
										<div class="talk-face"><img :src="item.from_uid == selectUid?selectData.user_image:myImg" alt=""></div>
										<div class="con invate" style="background-color: #F8F9FC;color:#333;"><i class="talk-arrow"></i>
											<div class="invate-txt">您接受了【{{item.to_uid_info.name || '行政总监'}}】的面试邀请</div>
											<a @click="showInterview(6,item)" class="link">查看</a>
										</div>
									</div>

									<!-- 用户拒绝面试邀请 -->
									<div class="item item-right" v-if="item.type==5" :class="[item.from_uid == selectUid?'item-left':'item-right']">
										<div class="talk-face"><img :src="item.from_uid == selectUid?selectData.user_image:myImg" alt=""></div>
										<div class="con invate"><i class="talk-arrow"></i>
											<div class="invate-txt">您拒绝了【{{item.to_uid_info.name || '行政总监'}}】的面试邀请</div>
											<a @click="showInterview(5,item)" style="color:#fff" class="link">已拒绝：{{item.content}}</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						</div>
		
						<div class="bottom-box">
							<div class="hd">
								<span class="btn-face noFresh"><img class="emotion" src="images/icon-face.png" alt=""></span>
								<!-- <a href="noFresh" class="btn-face" style="margin-left:10px;"><img src="images/resume.png" alt=""></a> -->
							</div>
							<div class="inputContent">
								<script style="width:792px !important;height:80px;z-index:10;" type="text/plain" id="myEditor" ></script>
								<div style="display: none;"  class="input" id="saytext" name="saytext" contenteditable="true"></div>
								<!-- <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea> -->
							</div>
							<div class="operate" style="bottom: 20px;margin: 0 30px;">
								<span class="gray">按Enter建换行</span>
								<span class="btn" @click="sendText">发送</span>
								<!-- <span class="btn noData" v-else>发送</span> -->
							</div>
						</div>
		
					</div>
				</div>
				
			</div>
		</div>
	</section>
	
	<!-- 去掉样式show即可默认不显示 -->
	<div class="alert alert-systemMsg show" v-if="show">
		<div class="over-close"  @click="closeMes($event)"></div>
		<div class="boxRb">
			<div class="title">消息</div>
			<div class="list scroll">
				<!-- v-for="(item,index) in newMesList" :key="index" -->
				<div v-for="(item,index) in newMesList" :key="index">
					<!-- {{item.created_at}}  -->
					<div class="time">{{item.created_at}}</div>
					<div class="item">
						<h3><a href="">消息标题</a></h3>
						<div class="con"  :class="{'limit':item.showNews && content.length>133}">
							{{item.content}}
							<a class="btn-more" v-if="content.length>133 && item.showNews" @click="item.showNews=false">展开</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<footer id="footer">
		
	</footer>

	<!-- 面试详情 -->
	<div class="alert alert-accept show" v-if="interviewDetail">
		<div class="over-close" @click="interviewDetail=false"></div>
		<div class="box">
			<div class="user">
				<img :src="selectData.user_image||'images/face.jpg'" alt="" class="face">
				<h4>{{selectData.name}}</h4>
				<p>{{interviewData.recruit.enterprise.name}} | 招聘者</p>
			</div>
			<div class="info">
				<!-- "interviewData.status" //状态 1已邀请 2已接受 3拒绝 4取消  -->
				<div class="item"><span class="tt">联系人：</span>{{interviewData.name}}</div>
				<div class="item"><span class="tt">联系电话：</span>{{interviewData.tel}}</div>
				<div class="item"><span class="tt">面试岗位：</span>{{interviewData.recruit.name}}</div>
				<div class="item"><span class="tt">面试时间：</span>{{interviewData.time}}</div>
				<div class="item"><span class="tt">面试地址：</span>{{interviewData.recruit.address}}</div>
				<div class="item"><span class="tt">备注：</span>带纸质简历</div>
				<div class="item tips" v-if="interviewType!=5">面试前 6 小时您可以取消面试！</div>
				<div v-if="interviewType==5" style="color:#FF5F24">拒绝理由:{{interviewData.reason}}</div>
				<div v-if="interviewType==4" style="color:#FF5F24">取消理由:{{interviewData.reason}}</div>
			</div>
			<div class="operate">
				<a v-if="interviewType==3" @click="updateMian(interviewData.id,3)" class="btn btn-white">拒绝</a><a v-if="interviewType==3" @click="updateMian(interviewData.id,2)" class="btn">接受</a>
				<a v-if="interviewType==6" @click="updateMian(interviewData.id,4)" class="btn btn-white w100 js_btn-cancle">取消面试</a>
			</div>
		</div>
	</div>

	<!-- <el-dialog
		title="拒绝此面试原因"
		:visible.sync="dialogVisible"
		width="35%">
		<textarea id="" cols="54" v-model="reason"></textarea>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="sureRefuse">确 定</el-button>
		</span>
	</el-dialog> -->

</div>
<script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
<script src="js/slide.min.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<!-- <script src="js/main.js"></script> -->
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/request.js"></script>
<script>
	$(function(){
		$("#header").load("./lcommon/header.html"); 
		$("#footer").load("./lcommon/footer.html"); 
	})
</script>
<script>
	var _vm = new Vue({
			el:'#app',
            data :{
			  show:false,  //显示消息弹窗
			  content:'',
			  myuid:0,
			  list:[],
			  mesList:[], ///聊天历史记录
			  filterList:[],
			  selectUid:  GetRequest().uid||'',
			  noReadNumber:0,
			  interviewDetail:false, //面试详情弹框
			  interviewType:'',  //面试详情弹框类型
			  interviewData:'',
			  page:1,
			  last_page:'',
			  newMesList:[],  //消息的列表
			  dialogVisible:true,
			  reason:"", //拒绝面试原因
			  selectData:'',//选中对象的数据
			  myImg:'',
			},
			watch: {
				list:function(){
					var that = this
					if(that.list.length){
						var arr = that.list.filter(function(item,index){
							return (item.from_uid_info.id == that.selectUid && item.to_uid_info.id == that.myuid)||(item.to_uid_info.id==that.selectUid && item.from_uid_info.id == that.myuid)
						})
						that.filterList = that.filterList.concat(JSON.parse(JSON.stringify(arr)))
						setTimeout(function(){
							scrollResize(true)
						},50)
					}
					
				}
			},
			mounted:function(){
				var that = this
				var a = $(".mesScroll").niceScroll(".mesWrap",{
					cursorcolor: "#eee",
					cursorwidth: "8px",
					cursorborder: "",
					scrollspeed: 60,
					preventmultitouchscrolling: true, // 防止多触点事件引发滚动
				});
				a.scrollend(function (e, e1) {
					if(e.end.y==0){
						that.handleScroll()
					}
				})
				$('.noFresh').click(function(e){
					e.preventDefault()
				});
				this.getUser()
				this.initData(true)
				// this.getHistory()
			},
            methods : {
				getUser: function (e, num) {
					var vm = this
					var url = 'person/my/info'
					var p = {}
					request( url, 'GET', JSON.stringify(p),
						function (res) {
							vm.myuid = res.data.info.type.uid
							vm.myImg = res.data.info.image
						},
						function (err) {
							vm.$message.error(err.message)
						}
					)
				},
				//发送消息
				sendText:function(cb){
					var that = this
					this.content = um.getContent()
					if(!this.content){
						that.$message.success("发送内容不能为空");
						return false
					}
					socket.emit('chat', {
                        "to_uid" : that.selectUid ,
						"content": that.content ,
						"type": "1"
					},function(){
						cb && cb()
					}) ;
					// var d = moment().format("YYYY-MM-DD HH:mm:ss");
					// this.list = [{
					// 	content: this.content,
					// 	created_at: d,
					// 	from_uid: that.myuid,
					// 	from_uid_info: {
					// 		id: that.myuid
					// 	},
					// 	id: 99999,
					// 	is_read: 1,
					// 	to_uid: that.selectUid,
					// 	to_uid_info: {
					// 		id: that.selectUid
					// 	},
					// 	type: 1,
					// 	updated_at: d,
					// 	userlist: that.selectUid + "" + that.myuid
					// }]

					this.content= ''
					um.setContent('', false);
					
				},

				//获取左边历史聊天
				initData:function(start){
					var that = this
					request('chat/boot-data','get',{},function(res){
							that.mesList = res.data
							connectIm(start)
							if(that.mesList&&that.mesList.length>0){
								that.noReadNumber = that.mesList.reduce(( pre, next ) => {
									return {
										is_read_count:Number(pre.is_read_count) + Number(next.is_read_count)
									}
								});
							}
							
							if(that.selectUid){
								var has;
								that.mesList.forEach(v => {
									if(v.id==that.selectUid){
										has = v
									}
								});
								if(!has){
									// var d = moment().format("YYYY-MM-DD HH:mm:ss");
									// has = {
									// 	account: "",
									// 	area_id: "",
									// 	birthday: "",
									// 	created_at: d,
									// 	desc: "",
									// 	email: "",
									// 	id: that.selectUid,
									// 	id_card: "",
									// 	is_read_count: 0,
									// 	login_ip: "",
									// 	login_time: "",
									// 	name: "",
									// 	newinfo: "",
									// 	sex: 0,
									// 	telephone: "****",
									// 	updated_at: d,
									// 	user_image: ""
									// }
									// that.mesList = [has].concat(that.mesList)
									that.content = '您好'
									that.sendText(function(){
										that.initData(false)
									})
								}else{
									that.selectChat(has)
								}
								
							}
							setTimeout(function(){
								$('.newMessage').click(function(){
									_vm.showNewMes()
								})
								$('.number').text(that.noReadNumber.is_read_count)
								if(that.noReadNumber.is_read_count==0){
									$('.number').hide()
								}else{
									$('.number').show()
								}
							},50)
							
						// that.$message.success(res.message);
					},function(err){
						that.$message({
							message: err.responseJSON.message,
							type: 'error',
							// duration: 0
						});
					})
				},

				//获取历史聊天记录
				getHistory:function(reload){
					var that = this,params={
						heruid:this.selectUid,
						page:this.page
					}
					request('chat/chat-list','get',params,function(res){
						// that.$message.success(res.message);
						that.myuid = res.data.myuid
						that.last_page = res.data.last_page
						if(reload){
							that.filterList = res.data.data
						} else{
							that.filterList = res.data.data.concat(that.filterList)

						}
						that.$forceUpdate()
						setTimeout(function(){
							scrollResize(that.page == 1)
							that.textWinScrollToBottom()
						},50)
					},function(err){
						that.$message.error(err.message);
					})
				},

				//选中某个聊天
				selectChat:function(val){
					var that = this
					this.selectData = val
					this.selectUid = val.id
					this.list = []
					this.page = 1
					this.getHistory(true)
					if(!val.is_read_count){
						return false
					}
					this.setRead(val)
				},
				setRead:function(val){
					var that = this
					request('chat/set-read','post',JSON.stringify({heruid:val.id}),function(res){
						that.initData()
						// that.$message.success(res.message);
					},function(err){
						that.$message.error(err.message);
					})
				},
				closeMes:function(e){
					e.stopPropagation();
					
					this.show=false
				},
				//时间差
				diffTime:function(index){	
					var that = this
					var diff;
					if(index==0){
						return this.filterList[index].created_at
					}else{
						var a = moment(that.filterList[index-1].created_at);
						var b = moment(that.filterList[index].created_at);
						diff = Math.abs(b.diff(a, 'minutes')) // 1
						if(diff>1){
							return this.filterList[index].created_at
						}else{
							return ""
						}
					}		
				},

				//滚动到顶部
				handleScroll(e){
					var that = this
						this.$nextTick(function(){
							// alert(that.page)
							if(that.page == that.last_page){
								return false
							}
							that.page++
							that.getHistory()
						})
					
				},
				showNewMes:function(){
					var that = this
					request('chat/main-list','get',{},function(res){
						if(res.data.length){
							that.show=true
						}else{
							that.$message.error("暂时没有新的消息");
						}
						res.data = res.data.map(function(item){
							var data = item
							data.showNews = true
							return data
						})
						that.newMesList = res.data 
					
					},function(err){
						that.$message.error(err.message);
					})

				},
				//显示面试详情
				showInterview(type,data){
					var that = this
					request('person/my/interview-info','GET',{
						interview_id:data.id,
					},function(res){
						that.interviewDetail = true
						that.interviewType = type
						that.interviewData = res.data
					},function(err){
						that.$message.error(err.message);
					})
					
				},
				// 修改面试状态
				updateMian(id,type){
					var that = this,reason=''
					if(type==3||type==4){
						this.dialogVisible = true
						this.$prompt('请输入理由', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
							}).then(({ value }) => {
								that.requstUpdate(id,type,value)
							}).catch(() => {
								that.interviewDetail = false
							});
						return false
					}else{
						this.requstUpdate(id,type,"")
					}
					
				},
				requstUpdate(id,type,value=""){
					var that = this,reason = value
					request('person/interview','PUT',{
						id:id,
						type:type,
						reason:value //拒绝原因
					},function(res){
						that.interviewDetail = false
						that.$message.success(res.message);
					},function(err){
						that.$message.error(err.message);
					})
				},
				sureRefuse(){
					this.requstUpdate(id,type)
					this.interviewDetail = false
					dialogVisible = false
				},
				textWinScrollToBottom(){
					//var $el = $(".mesWrap>div:last-child")[0]
					//if($el){
					//	$el.scrollIntoViewIfNeeded(true)
					//}
				},
            }
		}) ;

		// 聊天记录窗口大小改变，以及是否滚动到底部
		function scrollResize(isScrollBottom) {
			var scrollEl = $(".mesScroll");
			scrollEl.getNiceScroll().resize()

if (isScrollBottom && $('.mesWrap').height()>$('.mesScroll').height() ){ $('.mesWrap').css('transition', 'transform 0ms ease-out 0s').css('transform', 'translate3d(0px, '+ ($('.mesScroll').height()-$('.mesWrap').height()) +'px, 0px)');$(".mesWrap").getNiceScroll().resize(); }
			//if (isScrollBottom) scrollEl.getNiceScroll(0).doScrollTop(9999999, 0)
		}
		var token = getToken().substring(7)
		const socket = io('http://zhaopin-api.weihankeji.com:9501',  {
			transports: ['websocket'] ,
			reconnection: true,
			query: {
				"token":token ,
			}
		});
		
		function connectIm(start){
			if(!start){
				return
			}
			socket.on("chat:tip", function (res1) {
				// console.log('用户未读条数监听事件')
				// console.log(res1)
			}) //用户未读条数监听事件 

			socket.on("chat:info", function (res2) {
				_vm.list.push(res2)
				if(_vm.mesList.length){
					var isHas = _vm.mesList.find(function(item){
						return item.id == res2.from_uid
					})
					if(!isHas){
						// _vm.mesList.push(res2)
						_vm.initData()
					}
				}else{
					_vm.initData()
					// _vm.mesList.push(res2)
				}
			}) //用户信息监听事件
		}

</script>
</body>
</html>